body {
  margin: 0;
  font-family: sans-serif;
}

html {
  --main-bg-color: #000000;
  --card-shadow-color: #333333;
  --primary-text-color: #ffffff;
  --secondry-text-color: #cfcfcf;
  --sidebar-background-color: #f5f6f9;
  --title-text-color: rgb(4, 4, 4);
  --description-text-color: #5e646e;
  --button-text-color: rgb(17, 17, 17);
  --background-primary: #1668e3;
  --shadow-primary: 0 0 0 0.5px #e4e4e4, 0 4px 12px 0 rgb(0 0 0 / 8%);
}

@media (prefers-color-scheme: dark) {
  html {
    --main-bg-color: #000000;
    --card-shadow-color: #333333;
    --primary-text-color: #ffffff;
    --secondry-text-color: #cfcfcf;
    --sidebar-background-color: #f5f6f9;
    --resize-handle-hover-color: #dedfe1;
    --background-primary: #1668e3;
  }
}

html[data-theme="light"] {
  --main-bg-color: #a9a9a9;
  --card-shadow-color: #878787;
  --primary-text-color: #111111;
  --secondry-text-color: #333333;
}

html[data-theme="dark"] {
  --main-bg-color: #000000;
  --card-shadow-color: #333333;
  --primary-text-color: #ffffff;
  --secondry-text-color: #cfcfcf;
}

/* animations declarations */

.wbBounceIn {
  animation: wbBounceIn 0.2s forwards;
}

.wbBounceOut {
  animation: wbBounceOut 0.2s forwards;
}

@keyframes wbBounceIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes wbBounceOut {
  100% {
    transform: scale(0.7);
    opacity: 0;
  }
  30% {
    transform: scale(1.03);
  }
  0% {
    transform: scale(1);
  }
}
